<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌列表案例</title>
    <script src="../lib/vue.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap.css">
</head>
<body>
    <div id="app">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                id:<input type="text" class="form-control" v-model="id" />

                <!--@keyup.enter  在用户按键up的时候，并且是按的enter键，就会触发add事件-->
                name:<input type="text" class="form-control" v-model="name" @keyup.f2="add" />

                <input type="button" value="添加" class="btn btn-primary" @click="add" />


                搜索产品关键字:<input type="text" class="form-control" v-model="keyWords"  v-focus  v-color="'blue'"/>
            </div>
        </div>

        <table class="table table-bordered table-hover table-strip">
            <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Ctime</th>
                <th>Operation</th>
            </tr>
            </thead>
            <tbody>
                <!--之前的方式：遍历的值是固定的-->
                <!--<tr v-for="item in list" :key="item.id">-->
                <!--现在的方式： 遍历函数查询返回的数组,方法中的参数keyWords -->
                <tr v-for="item in search(keyWords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.cTime | dateFormat('yyyy-MM-dd')}}</td>
                    <td>
                        <a @click="deleteBrand(item.id)">delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!--私有过滤器-->
    <div id="app2">
        <p v-fontweight="900" v-color="'blue'" v-fontsize="'20'">{{date | dateFormat}}</p>
    </div>

    <script>
        //自定义指令
        //参数1：指令名称,v-可以不写
        //参数2：该指令要执行的操作
        Vue.directive('focus',{
            //参数1：指令所绑定的元素
            bind:function(el){//只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
                //el.focus();
                // 这里调用focus无效，因为bind方法是在绑定的时候生效的，这个时候，并没有生成dom元素，所以无效
            },

            inserted: function(el){//被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
                el.focus();
            },

            update:function(el){//所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新

            }
        })

        //自定义指令2：如何获取参数？
        Vue.directive('color',{
            //参数1：指令绑定的元素
            //参数2：是个对象，里面包括了指令名，指令的绑定值，字符串形式的指令表达式等
            bind:function(el,binding){
                el.style.color = binding.value;
            },
            inserted:function(){

            },
            update:function(){

            }
        })

        //自定义按键修饰符:相当于给按键中112取了别名f1
        Vue.config.keyCodes.f2 = 113;

        //全局过滤器
        Vue.filter("dateFormat",function(dateStr,pattern){
            var date = new Date(dateStr);
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hh = date.getHours();
            var mi = date.getMinutes();
            var ss = date.getSeconds();

            if(pattern && pattern.toLowerCase() == 'yyyy-mm-dd'){//格式化成yyyy-mm-dd
                //es6格式化时间
                return `${year}-${month}-${day}`;
            }else{
                return `${year}-${month}-${day} ${hh}:${mi}:${ss}`;
            }
        });

        var vue = new Vue({
            el:"#app",
            data:{
                id: '',
                name: '',
                keyWords: '',
                list : [
                    {id: 1, name: '阿斯顿马丁', cTime: new Date()},
                    {id: 2, name: '保时捷', cTime: new Date()}
                ]
            },
            methods:{
                add(){//添加一条新数据
                    var obj = {id: this.id, name: this.name, cTime: new Date()};
                    this.list.push(obj);

                    //置空输入框中内容
                    this.id = this.name = '';
                },
                deleteBrand(id){ //根据id删除一条数据
                    //类似于lambda表达式
                    //通过索引去除数组中的元素
                    /*this.list.some((item,i)=>{
                        if(item.id == id){
                            this.list.splice(i,1);
                            return true;
                        }
                    });*/
                    var index = this.list.findIndex((item)=>{
                        if(item.id == id){
                            return true;
                        }
                    });
                    this.list.splice(index,1);
                },
                search(keyWords){//根据关键字查询list，并把最终值放到临时list中

                    /*var tmpList = []; //注意不能放到data下面，会由于清除不了置空数据，导致死循环
                    this.list.forEach((item) => {
                        if(item.name.indexOf(keyWords) != -1){
                            tmpList.push(item);
                        }
                    });

                    return tmpList;*/

                    //方式2：
                    return this.list.filter(item => {
                        if(item.name.includes(keyWords)){
                            return item;
                    }
                    })
                }
            }
        });

        var vue2 = new Vue({
            el:"#app2",
            data:{
                date:new Date()
            },
            //私有过滤器
            filters:{
                dateFormat:function(dateStr,pattern){
                    console.log("进入的是私有过滤器");
                    var date = new Date(dateStr);
                    var year = date.getFullYear();
                    //padStart和padEnd
                    //padStart(total,val)  total：最终多少位  val:如果不满足填充什么值
                    var month = date.getMonth() + 1;
                    var day = date.getDate();
                    var hh = date.getHours();
                    var mi = date.getMinutes().toString().padStart(2,0);
                    var ss = date.getSeconds().toString().padStart(2,0);

                    if(pattern && pattern.toLowerCase() == 'yyyy-mm-dd'){//格式化成yyyy-mm-dd
                        //es6格式化时间
                        return `${year}-${month}-${day}`;
                    }else{
                        return `${year}-${month}-${day} ${hh}:${mi}:${ss}`;
                    }
                }
            },
            //私有指令
            directives: {
                fontweight:{
                      bind:function (el,binding) {
                        el.style.fontWeight = binding.value;
                      }
                },
                //自定义指令函数的简写形式
                fontsize:function(el,binding){//这里的函数默认会更新到bind和update中
                    el.style.fontSize = parseInt(binding.value) + 'px';
                }
            }
        })
    </script>
</body>
</html>